<template>
	<view>
		<view @click="goDetail(item)" :key="index" v-for="(item,index) in list" class="lisBox">
			<view class="lis">
				<view class="li_wrap">
					<view class="tit">
						{{item.title}}
					</view>
				</view>
				<view class="detail">
					<!-- 本公司急招水电安装工需要的抓紧联系我,一天补贴300元 -->
					
					
					
					<text v-if="item.mianyi" class="sel">
					  薪资范围：面议
					</text>
					
					<text v-else class="sel">
					 <text v-if="item.monthly_salary_min || item.monthly_salary_max">
					 	薪资范围：{{ item.monthly_salary_min?item.monthly_salary_min:'' }}~{{
					 	  item.monthly_salary_max?item.monthly_salary_max:''
					 	}}元/月
					 </text>
					</text>
					
					
					
					<!-- <text class="sel">{{item.monthly_salary_min}} ~ {{item.monthly_salary_max}} 元/月</text> -->
				</view>
				<!-- <view class="li_wrap">
					<view class="month">
						刘先生
					</view>
					<view class="day sel">
						已实名
					</view>
				</view> -->
				<view class="tags">
					<view><u-icon class="map" name="map"></u-icon>
					<text>{{item.province}}{{item.city}}{{item.district}}</text> </view>
				</view>
				<view class="time"><view><u-icon class="map map1" name="clock"></u-icon>{{item.add_time}}</view>

			</view>

		</view>
	</view>
</view>
</template>

<script>
export default {
  props: ["list", "gowhere"],
  data() {
    return {};
  },
  methods: {
    goDetail(item) {
      if (item.simple == 0) {
        uni.navigateTo({
          url: "/package/pages/searchJob/list/simpledetail?jobId=" + item.id,
        });
      } else {
        uni.navigateTo({
          url: "/package/pages/searchJob/list/detail?jobId=" + item.id,
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.sel {
  color: #ff8a33;
}
.lisBox {
  background: #ffffff;
  margin-top: 4rpx;
}

.lis {
  padding: 50rpx 32rpx 30rpx;
  border-bottom: 1px solid #f7f8fa;
  .time {
    text-align: left;
    font-size: 12px;
    color: #999;
    margin-top: 6px;
		.map1{
			margin-right: 5px;
		}
  }

  &:last-child {
    margin-bottom: 0;
  }

  .detail {
    font-size: 24rpx;
    color: #808080;
    margin-bottom: 14rpx;
  }
  .tags {
    display: flex;
    align-items: center;
    font-size: 22rpx;
    color: #999999;
    .map {
      margin-right: 12rpx;
    }
    text {
      margin-right: 80rpx;
    }
  }

  .li_wrap {
    margin-bottom: 14rpx;
    display: flex;
    align-items: center;

    .smallicon {
      display: blocrk;
      width: 40rpx;
      height: 40rpx;
    }

    .tit {
      flex: 1;
      margin-right: 20rpx;
      font-size: 14px;
      font-weight: bold;
      color: #333333;
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .day {
      padding: 2px 5px;
      background: #f5f5f5;
      border-radius: 6rpx;
      font-size: 20rpx;
      color: #808080;
      margin-left: 23rpx;

      font-weight: bold;
      &.sel {
        color: #ff8a33;
      }
    }

    .month {
      font-size: 28rpx;
      font-weight: bold;
      color: #1a1a1a;
    }
  }
}

.bots {
  display: flex;
  align-items: center;
  padding: 16rpx 32rpx;

  .img {
    display: block;
    width: 60rpx;
    height: 60rpx;
    margin-right: 10rpx;
    border-radius: 3px;
  }

  .companyName {
    font-size: 12px;
    color: #333333;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
  }
}
</style>
